import { useEffect, forwardRef, useImperativeHandle } from 'react';
import { Form, Input } from 'antd';
import _ from 'lodash';
import ExchangeVariable from '../components/ExchangeVariable';
import SubProcessSelector from '../components/SubProcessSelector';
import { formNameVerification } from '../../utils';

interface subProcessProps {
    curElement: any;
    subProcessData: any;
    processData: any;
}

const SubProcess = forwardRef((props: subProcessProps, ref) => {
    const { curElement, subProcessData, processData } = props;
    const [form] = Form.useForm();
    const callActivitiValue = Form.useWatch('callActiviti', form);

    useEffect(() => {
        let _curData = subProcessData?.find((item: { activityId: string; }) => item?.activityId == curElement?.id);
        form.setFieldsValue({
            ..._curData,
            activityName: curElement?.businessObject?.name,
        });
    }, [curElement, subProcessData]);

    useImperativeHandle(ref, () => ({
        form
    }));

    return (
        <Form
            labelAlign='left'
            labelWrap={true}
            layout={'vertical'}
            form={form}
        >
            <Form.Item label='任务标识' name={['activityId']} hidden={true} />
            <Form.Item
                label='任务标识'
                name='activityNo'
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                className='bpmn-custom-properties-radio-label no-padding'
            >
                <Input />
            </Form.Item>
            <Form.Item
                label='任务名称'
                name='activityName'
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                className='bpmn-custom-properties-radio-label no-padding process-designer-form-item-required'
                rules={formNameVerification}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label='子流程'
                name='callActiviti'
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                className='bpmn-custom-properties-radio-label no-padding'
            >
                <SubProcessSelector />
            </Form.Item>
            <Form.Item label='交换变量' name='psVariables'>
                <ExchangeVariable subProcessId={callActivitiValue?.processId || ''} processId={processData?.id || ''}/>
            </Form.Item>
        </Form>
    );
})

export default SubProcess;